import React, { FC, useState, useRef, useEffect } from 'react'
import { Tag, Button, Pagination } from 'antd';
import {
  DownloadOutlined,
  UploadOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import "./index.less"
import Navigation from '../../../component/Navigation/index'
import Table from '../../../component/table/index'
// 弹框
import Alert from '../../../component/alert'
// api接口
import { class_collageData } from '../../../api/Grade'

export default function ClassRoom() {
  // 弹框开关
  const [alertFlag, setAlertFlag] = useState(false)
  // 弹框标题
  const [alertName, setAlertName] = useState('')
  // 弹框内容
  const [content, setContent] = useState()
  // collage数据获取渲染
  const [data, setData] = useState([])
  // 总数组长度
  const [lengthData, setLengthData] = useState(Number)
  // 分页 点击的当前页码
  const [num, setNum] = useState(1)
  // 分页一页显示几条数据
  const [lookNum, setLookNum] = useState(10)
  const [college, setCollege] = useState('网站工程')
  const [campus, setCampus] = useState('wbj')
  const collageData = async () => {
    let resault = await class_collageData({
      college,
      campus,
      lookNum,
      num
    })
    setLengthData(resault.data.result.resault.length)
    setData(resault.data.result.data)
  }
  useEffect(() => {
    collageData()
  }, [college, campus, lookNum, num])
  // 点击创建教室
  const classAddfun = () => {
    setAlertFlag(true)
    setAlertName('创建教室')
    collageData()
  }
  // 明细点击事件  查看班级公共物品明细
  const lookMore = (text: any, data: any, index: number) => {
    setAlertFlag(true)
    setAlertName('明细')
    setContent(JSON.parse(text))
  }
  // 查看点击事件  点击查看  显示当前数据所有信息
  const classLookFun = (e, record, index) => {
    console.log(e.target.innerText, index);
    if (e.target.innerText === "查看") {
      setAlertFlag(true)
      setAlertName('查看')
      setContent(record)
    }
    if (e.target.innerText === "编辑") {
      setAlertFlag(true)
      setAlertName('编辑')
      setContent(record)
      console.log(record);
      collageData()
    }
    if (e.target.innerText === "删除") {
      setAlertFlag(true)
      setAlertName('删除')
      setContent(record)
      collageData()
    }
  }
  // 关闭弹窗
  const closeFlag = () => {
    setAlertFlag(false)
  }
  // 表格数据和渲染 
  const columns = [
    {
      title: '班级',
      dataIndex: 'classroom',
      key: 'classroom',
      render: (text, record, index) => {
        return (
          <>
            <span>{record.campus}_{text}</span>
          </>
        )
      }
    },
    {
      title: '容纳人数',
      dataIndex: 'galleryful',
      key: 'galleryful',
    },
    {
      title: '学院',
      dataIndex: 'college',
      key: 'college',
    },
    {
      title: '桌子',
      dataIndex: 'desks',
      key: 'desks',
    },
    {
      title: '桌子',
      dataIndex: 'chairs',
      key: 'chairs',
    },
    {
      title: '资产',
      dataIndex: 'property',
      key: 'property',
      render: (text, record, index) => {
        return <span className='class_property' onClick={() => {
          lookMore(text, record, index)
        }}>明细</span>
      }
    },
    {
      title: '操作',
      key: 'key',
      dataIndex: 'key',
      render: (text, record, index) => {
        return (<>
          {["查看", "编辑", "删除"].map(tag => {
            let color = tag === "删除" ? 'red' : 'green';
            if (tag === '查看') {
              color = 'blue';
            }
            return (
              <Tag className='class_tag' color={color} key={tag} onClick={(e) => { classLookFun(e, record, index) }}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>)
      }
    },
  ];
  // 左侧菜单栏
  const list = [
    {
      "id": 1,
      "collage": "网站工程",
      "school": [
        {
          "sid": "wbj",
          "name": "北京校区",
          "classList": [
            {
              "cid": "wbjg",
              "name": "专高",
            },
            {
              "cid": "wbjs",
              "name": "实训"
            }
          ]
        }, {
          "sid": "wbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "wbjg",
              "name": "专高"
            },
            {
              "cid": "wbjs",
              "name": "实训"
            }
          ]
        },
        {
          "sid": "whd",
          "name": "邯郸校区",
          "classList": [
            {
              "cid": "wbjg",
              "name": "专高"
            },
            {
              "cid": "wbjs",
              "name": "实训"
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "collage": "传媒学院",
      "school": [
        {
          "sid": "cbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "cbdg",
              "name": "专高"
            },
            {
              "cid": "cbds",
              "name": "实训"
            }
          ]
        }
      ]
    },
    {
      "id": 3,
      "collage": "计算机学院",
      "school": [
        {
          "sid": "jbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "jbdg",
              "name": "专高"
            },
            {
              "cid": "jbds",
              "name": "实训"
            }
          ]
        }
      ]
    },
    {
      "id": 4,
      "collage": "人工智能学院",
      "school": [
        {
          "sid": "rbd",
          "name": "保定校区",
          "classList": [
            {
              "cid": "rbdg",
              "name": "专高"
            },
            {
              "cid": "rbds",
              "name": "实训"
            }
          ]
        }
      ]
    }
  ]
  // 左侧菜单栏点击事件
  const handleClick = async (e: any) => {
    setCollege(e.keyPath[1])
    setCampus(e.keyPath[0])
  }
  // 分页
  const showSizeChange = (current, size) => {
    // pageSize 变化的回调
    setLookNum(size)
    setNum(current)
    collageData()
  }
  const changeSize = (page, pageSize) => {
    // 参数是改变后的页码及每页条数
    setLookNum(pageSize)
    setNum(page)
    collageData()
  }
  return (
    <div className='classroom'>
      <div className='class_btns'>
        <Button className='antd_btns' onClick={classAddfun} type="primary" icon={<PlusCircleOutlined />} size="middle">
          创建教室
        </Button>
        <Button className='antd_btns' type="primary" icon={<DownloadOutlined />} size="middle">
          导入
        </Button>
        <Button className='antd_btns' type="primary" icon={<UploadOutlined />} size="middle">
          导出
        </Button>
      </div>
      <div className='class_content clear'>
        <div className='class_leftTab'>
          <Navigation
            // 总数据
            data={list}
            // 一标题属性  数组类型  "collage":["网站工程", "人工智能"]
            primaryNavigationProps="collage"
            // 二级标题属性  "collage":["网站", "人工"]
            childrenProps='school'
            // 二级标题对象属性
            childrenItem='name'
            // 获取当前自己标题的key
            handleClick={handleClick}
            // 设置袭击标题的key值
            setChildrenKey="sid"
            // 样式
            style={{ width: 200, height: 500, border: "1px solid #ccc" }}
          />
        </div>
        <div className='class_table'>
          <div>
            <Table studentData={data} columns={columns} />
          </div>
          <div className='class_pages'>
            <Pagination
              // showQuickJumper
              showSizeChanger
              defaultCurrent={num}
              defaultPageSize={lookNum}
              total={lengthData}
              onShowSizeChange={showSizeChange}
              onChange={changeSize}
            />
          </div>
        </div>
      </div>
      {
        alertFlag ?
          <Alert alertName={alertName} fen={'zhang'} alertFlag={alertFlag} confirmLoading={true} con={content} close={closeFlag} />
          : null
      }
    </div>
  )
}















